<template>
	<view class="popup_btn" :style="{ height: height + 'px', paddingBottom: bottom + 'px' }">
		<view class="CON">
			<view class="L">
				<view class="top">
					<view>
						合计:
						<text style="color: #ff4c5a; padding: 0 6rpx">{{ allPrice }}</text>
						福币
					</view>
					<view @click="openEquip" v-if="isShow">
						已选装备({{ buyList.length }})
						<up-icon :name="store.state.userInfo.flag ? 'arrow-down' : 'arrow-up'" color="#666666"
							size="20rpx"></up-icon>
					</view>
				</view>
				<view class="bottom">
					<view>余额:{{ Info.ybCoinNumber }}福币</view>
					<view @click="goRecharge">
						去充值
						<up-icon name="arrow-right" color="#FBC438" size="20rpx"></up-icon>
					</view>
				</view>
			</view>
			<view class="R" @click="buy">
				<view class="R_touyin"></view>
				{{ isEnough ? btnName || '供奉' : '福币不足,请充值' }}
			</view>
		</view>
	</view>
	<!-- <KeyBoard ref="KeyBoardRef" @sendPass="sendPass" /> -->
</template>

<script setup>
	import KeyBoard from '@/components/keyboard.vue';
	import store from '@/store/index.js'; //需要引入store
	import {
		computed,
		defineProps,
		ref,
		defineEmits,
		watch,
		// useStore
	} from 'vue';
	import popupCompVue from '/components/popup/index.vue';
	import {
		onReady,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import HomeApi from '@/API/home/index.js';
	import MineApi from '@/API/mine/index.js';
	const homeApi = new HomeApi();
	const mineApi = new MineApi();
	const props = defineProps({
		// 1:纪念馆，2:墓园，3:追思会，4:祭拜，5:祠堂
		offeringType: {
			// type: String || Number
		},
		buyList: {
			type: Array,
			default: []
		},
		type: {
			type: Number || String
		},
		isShow: {
			type: Boolean,
			default: true
		},
		btnName: String
	});
	const emit = defineEmits(['sendHeight', 'openEquip', 'queryParent']);
	const bottom = getApp().globalData.bottom;
	const KeyBoardRef = ref();
	let height = ref(uni.upx2px(120));
	let Info = ref({});
	let allPrice = ref(0);
	setTimeout(() => {
		emit('sendHeight', height.value);
		getInfo();
	}, 1);
	const getInfo = async () => {
		if (!store.state.userInfo.userInfo.phoneNumber) {
			await store.dispatch('setUserInfo');
		}
		Info.value = store.state.userInfo.userInfo;
	};
	const isEnough = computed(() => {
		let price = 0;
		props.buyList.forEach((ele) => {
			price += ele.price;
		});
		allPrice.value = price;
		if (Info.value.ybCoinNumber >= price) {
			return true;
		} else {
			return false;
		}
	});
	const openEquip = () => {
		store.state.userInfo.flag = !store.state.userInfo.flag;
		emit('openEquip', store.state.userInfo.flag);
	};
	const goRecharge = () => {
		uni.navigateTo({
			url: '/subPages/mine/cloudCoin/recharge'
		});
	};
	const buy = () => {
		if (!isEnough.value) {
			// uni.showToast({
			// 	icon: 'none',
			// 	title: '余额不足'
			// });
			setTimeout(() => {
				uni.navigateTo({
					url: '/subPages/mine/cloudCoin/recharge'
				});
			}, 1000);
			return;
		}

		if (props.buyList.length === 0) {
			uni.showToast({
				icon: 'none',
				title: props.type === 'renovation' ? '请选择装修' : '请选择供奉物'
			});
			return;
		}

		emit('buy', props.buyList);
	};

	// const sendPass = (e) => {
	// 	// 祭品购买
	// 	if (props.type == 'oblation') {
	// 		let ids = props.buyList.map((ele) => ele.offeringId);
	// 		mineApi
	// 			.buyOffering({
	// 				offeringIdStr: ids,
	// 				buyAmountStr: new Array(ids.length).fill(1),
	// 				paymentPassword: e,
	// 				correspondingId:
	// 					props.offeringType == 1
	// 						? JSON.parse(uni.getStorageSync('cemeteryItem')).memorialId
	// 						: props.offeringType == 2
	// 						? JSON.parse(uni.getStorageSync('cemeteryItem')).memorialId
	// 						: props.offeringType == 3
	// 						? uni.getStorageSync('memorialServiceId')
	// 						: props.offeringType == 4
	// 						? uni.getStorageSync('peopleId')
	// 						: props.offeringType == 5
	// 						? uni.getStorageSync('hallId')
	// 						: undefined,
	// 				// 在哪里购买（1:纪念馆，2:墓园，3:追思会，4:祭拜，5:祠堂）
	// 				belongingTo: props.offeringType
	// 			})
	// 			.then((res) => {
	// 				uni.showToast({
	// 					icon: 'none',
	// 					title: res.msg
	// 				});
	// 				KeyBoardRef.value.showKeyboard = false;
	// 				getInfo();
	// 				setTimeout(() => {
	// 					emit('queryParent');
	// 				}, 100);
	// 			})
	// 			.catch(() => {});
	// 	}
	// 	// 装饰购买(1:纪念馆，2:墓园，3:追思会，4:祭拜，5:祠堂)
	// 	if (props.offeringType == 2 || props.offeringType == 4 || props.offeringType == 5) {
	// 		let ids = props.buyList.map((ele) => ele.id);
	// 		homeApi
	// 			.buyDecorationDecorationApi({
	// 				belongingTo: props.offeringType,
	// 				paymentPassword: e,
	// 				correspondingId:
	// 					props.offeringType == 2
	// 						? JSON.parse(uni.getStorageSync('cemeteryItem')).memorialId
	// 						: props.offeringType == 5
	// 						? uni.getStorageSync('hallId')
	// 						: undefined,
	// 				decorationDecorationIds: ids
	// 			})
	// 			.then((res) => {
	// 				uni.showToast({
	// 					icon: 'none',
	// 					title: res.msg
	// 				});
	// 				KeyBoardRef.value.showKeyboard = false;
	// 				getInfo();
	// 				setTimeout(() => {
	// 					emit('queryParent');
	// 				}, 100);
	// 			})
	// 			.catch(() => {});
	// 	}
	// };


	const getShowTask = computed(() => {
		return store.state;
	})

	watch(getShowTask, (newVal, oldVal) => {
		getInfo()
	}, {
		immediate: true,
		deep: true
	});
</script>

<style lang="scss">
	.popup_btn {
		position: fixed;
		z-index: 100099;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		box-shadow: 0 -8rpx 20px 4px rgba(212, 198, 179, 0.15);

		@media screen and (min-width: 992px) {
			width: 828rpx;
			margin: 0 auto;
			box-sizing: border-box;
			left: 50%;
			transform: translateX(-50%);
		}

		.CON {
			position: relative;
			padding: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100%;
			box-sizing: border-box;

			.L {
				display: flex;
				flex-direction: column;

				.top {
					display: flex;
					font-weight: 500;
					font-size: 32rpx;
					line-height: 32rpx;

					view:nth-child(1) {
						color: #0e0e0e;
					}

					view:nth-child(2) {
						display: flex;
						align-items: center;
						padding-left: 16rpx;
						color: #666666;
					}
				}

				.bottom {
					padding-top: 20rpx;
					display: flex;

					view:nth-child(1) {
						font-size: 24rpx;
						color: #666666;
					}

					view:nth-child(2) {
						display: flex;
						align-items: center;
						padding-left: 8rpx;
						font-size: 24rpx;
						color: #fbc438;
					}
				}
			}

			.R {
				// background: url('http://112.124.50.179:8888/imgs/home/btnbg.png')no-repeat;
				// background-size: 100%;
				width: 260rpx;
				height: 76rpx;
				background: linear-gradient(180deg, #fff1d5 0%, #ffd582 100%);
				border-radius: 46rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #524630;
				line-height: 76rpx;
				letter-spacing: 1px;
				text-align: center;
				position: relative;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
			}

			.R_touyin {
				width: 260rpx;
				height: 76rpx;
				border-radius: 46rpx;
				position: absolute !important;
				left: 0;
				top: 5rpx;
				transform-style: preserve-3d;
				transform: translateZ(5rpx);
				background-color: #ffa902 !important;
				z-index: -1;
			}
		}
	}
</style>